<template>
  <div class="flex flex-col h-full overflow-hidden">
    <app-header/>

    <main>
      <div class="delete-confirm-container">
        <h2 class="page-title">删除PLC地址确认</h2>

        <div class="confirm-content">
          <div class="warning-icon">
            <i class="fas fa-exclamation-triangle"></i>
          </div>

          <div class="address-info">
            <p class="warning-text">确定要删除以下PLC地址吗？此操作无法撤销。</p>
            <div class="info-item">
              <span class="label">地址:</span>
              <span class="value">{{ addressData.address }}</span>
            </div>
            <div class="info-item">
              <span class="label">属性名称:</span>
              <span class="value">{{ addressData.propertyName || '-' }}</span>
            </div>
            <div class="info-item">
              <span class="label">工位:</span>
              <span class="value">{{ getStationName(addressData.station) }}</span>
            </div>
            <div class="info-item">
              <span class="label">类别:</span>
              <span class="value">{{ getCategoryName(addressData.category) }}</span>
            </div>
            <div class="info-item">
              <span class="label">描述:</span>
              <span class="value">{{ addressData.description || '-' }}</span>
            </div>
          </div>

          <div class="button-group">
            <button type="button" class="hmi-button hmi-button-secondary" @click="goBack">
              <i class="fas fa-times"></i>取消
            </button>
            <button
              type="button"
              class="hmi-button hmi-button-danger"
              @click="confirmDelete"
              :disabled="isDeleting"
            >
              <i :class="isDeleting ? 'fas fa-spinner fa-spin' : 'fas fa-trash'"></i>
              {{ isDeleting ? '删除中...' : '确认删除' }}
            </button>
          </div>
        </div>
      </div>
    </main>

    <div v-if="notification.show" class="notification"
         :class="{ 'notification-success': notification.type === 'success', 'notification-error': notification.type === 'error' }">
      <span>{{ notification.message }}</span>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import AppHeader from '@/components/AppHeader.vue'
import plcAddressStore from '@/api/plcAddress'
import {logger} from '@/utils/logger'

const router = useRouter()
const route = useRoute()

// 响应式数据
const addressData = reactive({
  id: '',
  address: '',
  propertyName: '',
  station: '',
  category: '',
  description: ''
})

const isDeleting = ref(false)

// 通知状态
const notification = reactive({
  show: false,
  message: '',
  type: 'success'
})

// 显示通知
const showNotification = (message, type = 'success') => {
  notification.show = true
  notification.message = message
  notification.type = type

  setTimeout(() => {
    notification.show = false
  }, 3000)
}

// 加载地址数据
const loadAddressData = async () => {
  try {
    const addressId = route.params.id
    const address = await plcAddressStore.getById(addressId)

    if (!address) {
      showNotification('地址不存在', 'error')
      router.back()
      return
    }

    addressData.id = address.id
    addressData.address = address.address
    addressData.propertyName = address.propertyName
    addressData.station = address.station
    addressData.category = address.category
    addressData.description = address.description
    logger.info(`已加载要删除的PLC地址数据: ${address.address}`)
  } catch (error) {
    logger.error(`加载PLC地址数据失败: ${error.message}`)
    showNotification('加载地址数据失败', 'error')
    router.back()
  }
}

// 确认删除
const confirmDelete = async () => {
  try {
    isDeleting.value = true
    await plcAddressStore.delete(addressData.id)
    logger.info(`成功删除PLC地址: ${addressData.address}`)
    showNotification('地址删除成功')

    // 删除成功后返回列表页
    setTimeout(() => {
      router.back()
    }, 1500)
  } catch (error) {
    logger.error(`删除PLC地址失败: ${error.message}`)
    showNotification('删除地址失败', 'error')
  } finally {
    isDeleting.value = false
  }
}

// 返回列表页
const goBack = () => {
  router.back()
}

// 工位名称映射
const getStationName = (station) => {
  const stationMap = {
    'station1': '工位1',
    'station2': '工位2',
  }
  return stationMap[station] || station
}

// 类别名称映射
const getCategoryName = (category) => {
  const categoryMap = {
    'process': '工艺参数',
    'realtime': '实时监控',
  }
  return categoryMap[category] || category
}

// 页面加载时初始化
onMounted(() => {
  loadAddressData()
})
</script>

<style scoped>
main {
  flex-grow: 1;
  padding: 1.5rem;
  overflow-y: auto;
}

.delete-confirm-container {
  max-width: 500px;
  margin: 0 auto;
  background-color: var(--bg-secondary);
  border-radius: 0.75rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  padding: 1.5rem;
  border: 1px solid var(--border-color);
}

.page-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 1.5rem;
  text-align: center;
}

.confirm-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.warning-icon {
  font-size: 3rem;
  color: var(--status-yellow);
}

.address-info {
  width: 100%;
}

.warning-text {
  text-align: center;
  color: var(--text-primary);
  margin-bottom: 1rem;
}

.info-item {
  display: flex;
  padding: 0.5rem;
  border-bottom: 1px solid var(--border-color);
}

.info-item:last-child {
  border-bottom: none;
}

.label {
  width: 80px;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.value {
  color: var(--text-primary);
  flex-grow: 1;
}

.button-group {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 1rem;
}

.notification {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.75rem 1.5rem;
  border-radius: 0.375rem;
  color: white;
  font-size: 0.875rem;
  z-index: 50;
  transition: all 0.3s ease;
}

.notification-success {
  background-color: var(--status-green);
}

.notification-error {
  background-color: var(--status-red);
}
</style>
